<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link rel="stylesheet" href="%E4%B8%9C%E6%96%B9%E4%BB%99%E7%9B%9F_%E7%81%B5%E9%A2%9C%E5%A6%99%E6%89%8B_%E9%80%9A%E7%94%A8_v20250526.css?v=22">
  <title>东方仙盟开源酒店押金管理系统</title>

  <style>
    /* 房态卡片样式 */
    .room-status-container {
      display: grid;
      grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
      gap: 15px;
      padding: 15px 0;
    }
    
    .room-card {
      border-radius: 10px;
      padding: 15px;
      text-align: center;
      cursor: pointer;
      transition: transform 0.2s;
      box-shadow: 0 2px 5px rgba(0,0,0,0.1);
    }
    
    .room-card:hover {
      transform: translateY(-3px);
    }
    
    .room-card.available {
      background-color: #d4edda; /* 绿色：空房 */
      border: 1px solid #c3e6cb;
    }
    
    .room-card.occupied {
      background-color: #fff3cd; /* 黄色：已入住 */
      border: 1px solid #ffeeba;
    }
    
    .room-card .room-number {
      font-size: 1.5em;
      font-weight: bold;
      margin-bottom: 5px;
    }
    
    .room-card .room-type {
      font-size: 0.9em;
      color: #666;
    }
  </style>
</head>
<body style="margin: 0;
  padding: 0;
  box-sizing: border-box;">
  <!-- 顶部 Header -->
  <header class="仙盟创梦header">
    未来之窗东方仙盟酒店押金原路退回
  </header>

  <!-- 主体布局：左侧 Nav + 右侧内容 -->
  <div class="app-container " style=" display: flex;
  height: calc(100vh - 35px - 40px); /* 减去 Header 和 Footer 高度 */">
    <!-- 左侧可收缩 Nav -->
    <nav class="东方仙盟_左侧菜单sidebar" id="sidebar">
      <div class="sidebar-header 软件名称 ">
	  <h2>软件名称</h2>
        <span class="toggle-btn 收缩" onclick="toggleSidebar()">☰</span>
         
      </div>
      <ul class=" nav-list" style="padding-left: 10px;">
        <li class="nav-item" onclick="东方仙盟菜单_显示_主页面('reception')">收银台</li>
        <li  class="nav-item" onclick="东方仙盟菜单_显示_主页面('deposit')">押金管理</li>
        <li  class="nav-item" onclick="东方仙盟菜单_显示_主页面('basic')">基础资料</li>
        <li  class="nav-item" onclick="东方仙盟菜单_显示_主页面('payment')">绑定收款</li>
        <li  class="nav-item" onclick="东方仙盟菜单_显示_主页面('login')">登录（预留）</li>
      </ul>
    </nav>

    <!-- 右侧内容区域 -->
    <main class=" 东方仙盟_灵颜妙手" id="mainContent">
      <!-- 页面容器，通过 JS 动态切换内容 -->
	  <!--
      <div id="receptionPage" class="page" style="display: none;">
        <h2>收银台（房态页面）</h2>
        
        <table border="1">
          <thead>
            <tr>
              <th>房号</th>
              <th>房型</th>
              <th>状态</th>
            </tr>
          </thead>
          <tbody id="roomStatusTableBody">
            
          </tbody>
        </table>
      </div>
	  -->

	   <div id="receptionPage" class="page 表单" style="display: none;width:100%;">
        <h2>收银台（房态页面）</h2>
        <div class="room-status-container" id="roomStatusContainer">
          <!-- 动态渲染房态卡片 -->
        </div>
      </div>


<!--
	    <div id="basicPage" class="page" style="display: none;">
        <h2>基础资料</h2>
        
        <div>
          <h3>房型管理</h3>
          <input type="text" id="roomTypeId" placeholder="ID">
          <input type="text" id="roomTypeName" placeholder="名称">
          <input type="number" id="roomTypePrice" placeholder="默认房价">
          <input type="number" id="roomTypeDeposit" placeholder="默认押金">
          <button onclick="saveRoomType()">保存房型</button>
          <button onclick="deleteRoomType()">删除房型</button>
          <ul id="roomTypeList"></ul>
        </div>

       
        <div>
          <h3>楼层管理</h3>
          <input type="text" id="floorId" placeholder="ID">
          <input type="text" id="floorName" placeholder="名称">
          <input type="number" id="floorSort" placeholder="序号">
          <button onclick="saveFloor()">保存楼层</button>
          <button onclick="deleteFloor()">删除楼层</button>
          <ul id="floorList"></ul>
        </div>

        
        <div>
          <h3>房间管理</h3>
          <input type="text" id="roomId" placeholder="ID">
          <input type="text" id="roomTypeIdSelect" placeholder="房型ID">
          <input type="text" id="roomFloorIdSelect" placeholder="楼层ID">
          <input type="text" id="roomName" placeholder="名称">
          <input type="number" id="roomSort" placeholder="序号">
          <button onclick="saveRoom()">保存房间</button>
          <button onclick="deleteRoom()">删除房间</button>
          <ul id="roomList"></ul>
        </div>
      </div>

	  -->

 <style>
   
    
    .container {
      max-width: 1200px;
      margin: 20px auto;
      padding: 0 20px;
    }
    
    h2 {
      color: #333;
      margin-top: 30px;
    }
    
    table {
      width: 100%;
      border-collapse: collapse;
      margin-top: 10px;
    }
    
    table, th, td {
      border: 1px solid #ddd;
    }
    
    th, td {
      padding: 8px 12px;
      text-align: left;
    }
    
    th {
      background-color: #f2f2f2;
    }
    
    tr:hover {
      background-color: #f5f5f5;
    }
    
    button {
      padding: 5px 10px;
      margin-right: 5px;
      cursor: pointer;
      border: none;
      border-radius: 3px;
    }
    
    .btn-add {
      background-color: #4CAF50;
      color: white;
    }
    
    .btn-edit {
      background-color: #2196F3;
      color: white;
    }
    
    .btn-delete {
      background-color: #f44336;
      color: white;
    }
    
    
    
     
   
    /*
	   .modal {
      display: none;
      position: fixed;
      z-index: 1;
      left: 0;
      top: 0;
      width: 100%;
      height: 100%;
      overflow: auto;
      background-color: rgba(0,0,0,0.4);
    }
	
    
   
	*/
	.仙盟_dialog{
	  display: none;
	  }
    
  
  </style>
	   <div id="basicPage" class="page 表单" style="display: none;">
<!-- 导航菜单 -->
    <div class="nav">
      <button onclick="东方仙盟菜单_显示_子页面('roomType')">房型管理</button>
      <button onclick="东方仙盟菜单_显示_子页面('floor')">楼层管理</button>
      <button onclick="东方仙盟菜单_显示_子页面('room')">房间管理</button>
    </div>
    
    <!-- 房型管理 -->
    <div id="roomTypePage" class="  东方仙盟子页面">
      <h2>房型管理</h2>
      <button class="btn-add" onclick="openModal('roomType', 'add')">添加房型</button>
      
      <table>
        <thead>
          <tr>
            <th>ID</th>
            <th>名称</th>
            <th>默认房价</th>
            <th>默认押金</th>
            <th>操作</th>
          </tr>
        </thead>
        <tbody id="roomTypeTable">
          <!-- 动态加载数据 -->
        </tbody>
      </table>
    </div>
    
    <!-- 楼层管理 -->
    <div id="floorPage" class="  东方仙盟子页面 表单" style="display: none;">
      <h2>楼层管理</h2>
      <button class="btn-add" onclick="openModal('floor', 'add')">添加楼层</button>
      
      <table>
        <thead>
          <tr>
            <th>ID</th>
            <th>名称</th>
            <th>序号</th>
            <th>操作</th>
          </tr>
        </thead>
        <tbody id="floorTable">
          <!-- 动态加载数据 -->
        </tbody>
      </table>
    </div>
    
    <!-- 房间管理 -->
    <div id="roomPage" class="  东方仙盟子页面 " style="display: none;">
      <h2>房间管理</h2>
      <button class="btn-add" onclick="openModal('room', 'add')">添加房间</button>
      
      <table>
        <thead>
          <tr>
            <th>ID</th>
            <th>房型</th>
            <th>楼层</th>
            <th>名称</th>
            <th>序号</th>
            <th>操作</th>
          </tr>
        </thead>
        <tbody id="roomTable">
          <!-- 动态加载数据 -->
        </tbody>
      </table>
    </div>
  </div>
  
  <!-- 模态框 -->
  <div id="modal" class="modal 仙盟_dialog">
    <div class="content">
      <span class="close" onclick="东方仙盟菜单_关闭模态('modal')">&times;</span>
      <h3 id="modalTitle">添加房型</h3>
      
      <form id="dataForm">
        <input type="hidden" id="formType">
        <input type="hidden" id="formAction">
        <input type="hidden" id="formId">
        
        <div id="roomTypeFormFields">
          <div class="fg">
            <label>名称:</label>
            <input type="text" id="roomTypeName" required>
          </div>
          <div class="fg">
            <label>默认房价:</label>
            <input type="number" id="roomTypePrice" required>
          </div>
          <div class="fg">
            <label>默认押金:</label>
            <input type="number" id="roomTypeDeposit" required>
          </div>
        </div>
        
        <div id="floorFormFields" style="display: none;">
          <div class="fg">
            <label>名称:</label>
            <input type="text" id="floorName" required>
          </div>
          <div class="fg">
            <label>序号:</label>
            <input type="number" id="floorSort" required>
          </div>
        </div>
        
        <div id="roomFormFields" style="display: none;">
          <div class="fg">
            <label>房型:</label>
            <select id="roomTypeId" required>
              <!-- 动态加载房型选项 -->
            </select>
          </div>
          <div class="fg">
            <label>楼层:</label>
            <select id="roomFloorId" required>
              <!-- 动态加载楼层选项 -->
            </select>
          </div>
          <div class="fg">
            <label>名称:</label>
            <input type="text" id="roomName" required>
          </div>
          <div class="fg">
            <label>序号:</label>
            <input type="number" id="roomSort" required>
          </div>
        </div>
        
        <button type="button" onclick="saveData()">保存</button>
        <button type="button" onclick="东方仙盟菜单_关闭模态('modal')">取消</button>
      </form>
    </div>

 </div>




      <div id="depositPage" class="page 表单" style="display: none;">
        <h2>押金管理</h2>
        <!-- 押金订单列表示例 -->
        <table border="1">
          <thead>
            <tr>
              <th>订单编号</th>
              <th>房间号</th>
              <th>客人姓名</th>
              <th>总金额</th>
              <th>状态</th>
              <th>操作</th>
            </tr>
          </thead>
          <tbody id="depositTableBody">
            <!-- 动态渲染押金订单 -->
          </tbody>
        </table>
      </div>

      <!-- 其他页面保持不变 -->
      
    </main>
  </div>

  <!-- 底部版权 -->
  <footer class="仙盟创梦footer">
    未来之窗软件服务中心
  </footer>

  <!-- 创建订单模态框 -->
  <div id="createOrderModal" class="modal 仙盟_dialog" style="display: none;">
    <div class="content">
      <h3>创建入住订单</h3>
      <div>
        <label>房间号：<span id="modalRoomName"></span></label>
        <input type="hidden" id="modalRoomId">
      </div>
      <div>
        <label>身份证号：</label>
        <input type="text" id="modalUserId" placeholder="客人身份证号">
      </div>
      <div>
        <label>姓名：</label>
        <input type="text" id="modalUserName" placeholder="客人姓名">
      </div>
      <div>
        <label>手机号：</label>
        <input type="text" id="modalUserPhone" placeholder="客人手机号">
      </div>
      <div>
        <label>押金金额：<span id="modalDepositPrice"></span></label>
      </div>
      <div>
        <button onclick="submitCreateOrder()">确认创建</button>
        <button onclick="东方仙盟菜单_关闭模态('createOrderModal')">取消</button>
      </div>
    </div>
  </div>

  <script  >// ------------------ 全局变量 ------------------
const STORAGE_PREFIX = "东方仙盟开源酒店系统_";
let mer_id = "默认商户ID"; // 可根据需求动态设置
let store_id = "默认门店ID"; // 可根据需求动态设置

// 页面初始化：加载基础数据、默认显示收银台
/*
window.onload = function() {
  loadRoomTypes();
  loadFloors();
  loadRooms();
  loadDepositOrders();
  showPage("reception");
  renderRoomStatus();
};
*/
// ------------------ 左侧 Nav 切换页面 ------------------
function 东方仙盟菜单_显示_主页面(pageId) {
  const pages = document.getElementsByClassName("page");
  for (let i = 0; i < pages.length; i++) {
    pages[i].style.display = "none";
  }
  document.getElementById(pageId + "Page").style.display = "inline-block";
}

 // 切换页面
    function 东方仙盟菜单_显示_子页面(pageId) {
      const pages = document.querySelectorAll('.东方仙盟子页面');
      pages.forEach(page => {
        page.style.display = 'none';
      });
      
      document.getElementById(pageId + 'Page').style.display = 'block';
    }

function 东方仙盟菜单_关闭模态(灵体) {
  document.getElementById(灵体).style.display = "none";
}

// 收缩/展开左侧 Nav
function toggleSidebar() {
  const sidebar = document.getElementById("sidebar");
  sidebar.classList.toggle("collapsed");
}

// ------------------ 基础资料：房型管理（localStorage） ------------------
// 保存房型
function saveRoomType() {
  const id = document.getElementById("roomTypeId").value;
  const name = document.getElementById("roomTypeName").value;
  const price = document.getElementById("roomTypePrice").value;
  const deposit = document.getElementById("roomTypeDeposit").value;
  
  if (!id || !name || !price || !deposit) {
    alert("请填写完整信息");
    return;
  }

  const roomTypes = getLocalStorage("roomTypes") || [];
  // 判断是否已存在，存在则修改，否则新增
  const index = roomTypes.findIndex(item => item.id === id);
  if (index > -1) {
    roomTypes[index] = { id, name, price, deposit };
  } else {
    roomTypes.push({ id, name, price, deposit });
  }
  setLocalStorage("roomTypes", roomTypes);
  loadRoomTypes(); // 重新渲染列表
  clearRoomTypeInputs();
}

// 删除房型
function deleteRoomType() {
  const id = document.getElementById("roomTypeId").value;
  const roomTypes = getLocalStorage("roomTypes") || [];
  const newRoomTypes = roomTypes.filter(item => item.id !== id);
  setLocalStorage("roomTypes", newRoomTypes);
  loadRoomTypes();
  clearRoomTypeInputs();
}
/*
// 加载房型列表
function loadRoomTypes() {
  const roomTypes = getLocalStorage("roomTypes") || [];
  const listDom = document.getElementById("roomTypeList");
  listDom.innerHTML = "";
  roomTypes.forEach(item => {
    const li = document.createElement("li");
    li.innerText = `ID: ${item.id} | 名称: ${item.name} | 房价: ${item.price} | 押金: ${item.deposit}`;
    listDom.appendChild(li);
  });
}
*/

// 清空房型输入框
function clearRoomTypeInputs() {
  document.getElementById("roomTypeId").value = "";
  document.getElementById("roomTypeName").value = "";
  document.getElementById("roomTypePrice").value = "";
  document.getElementById("roomTypeDeposit").value = "";
}

// ------------------ 基础资料：楼层管理（localStorage） ------------------
// 保存楼层
function saveFloor() {
  const id = document.getElementById("floorId").value;
  const name = document.getElementById("floorName").value;
  const sort = document.getElementById("floorSort").value;
  
  if (!id || !name || !sort) {
    alert("请填写完整信息");
    return;
  }

  const floors = getLocalStorage("floors") || [];
  const index = floors.findIndex(item => item.id === id);
  if (index > -1) {
    floors[index] = { id, name, sort };
  } else {
    floors.push({ id, name, sort });
  }
  setLocalStorage("floors", floors);
  loadFloors();
  clearFloorInputs();
}

// 删除楼层
function deleteFloor() {
  const id = document.getElementById("floorId").value;
  const floors = getLocalStorage("floors") || [];
  const newFloors = floors.filter(item => item.id !== id);
  setLocalStorage("floors", newFloors);
  loadFloors();
  clearFloorInputs();
}
/*
// 加载楼层列表
function loadFloors() {
  const floors = getLocalStorage("floors") || [];
  const listDom = document.getElementById("floorList");
  listDom.innerHTML = "";
  floors.forEach(item => {
    const li = document.createElement("li");
    li.innerText = `ID: ${item.id} | 名称: ${item.name} | 序号: ${item.sort}`;
    listDom.appendChild(li);
  });
}
*/
// 清空楼层输入框
function clearFloorInputs() {
  document.getElementById("floorId").value = "";
  document.getElementById("floorName").value = "";
  document.getElementById("floorSort").value = "";
}

// ------------------ 基础资料：房间管理（localStorage） ------------------
// 保存房间
function saveRoom() {
  const id = document.getElementById("roomId").value;
  const roomTypeId = document.getElementById("roomTypeIdSelect").value;
  const floorId = document.getElementById("roomFloorIdSelect").value;
  const name = document.getElementById("roomName").value;
  const sort = document.getElementById("roomSort").value;
  
  if (!id || !roomTypeId || !floorId || !name || !sort) {
    alert("请填写完整信息");
    return;
  }

  const rooms = getLocalStorage("rooms") || [];
  const index = rooms.findIndex(item => item.id === id);
  if (index > -1) {
    rooms[index] = { id, roomTypeId, floorId, name, sort };
  } else {
    rooms.push({ id, roomTypeId, floorId, name, sort });
  }
  setLocalStorage("rooms", rooms);
  loadRooms();
  clearRoomInputs();
  renderRoomStatus(); // 房间变动后重新渲染房态
}

// 删除房间
function deleteRoom() {
  const id = document.getElementById("roomId").value;
  const rooms = getLocalStorage("rooms") || [];
  const newRooms = rooms.filter(item => item.id !== id);
  setLocalStorage("rooms", newRooms);
  loadRooms();
  clearRoomInputs();
  renderRoomStatus(); // 房间变动后重新渲染房态
}

// 加载房间列表
function loadRooms() {
  const rooms = getLocalStorage("rooms") || [];
  const listDom = document.getElementById("roomList");
  listDom.innerHTML = "";
  rooms.forEach(item => {
    const li = document.createElement("li");
    li.innerText = `ID: ${item.id} | 房型ID: ${item.roomTypeId} | 楼层ID: ${item.floorId} | 名称: ${item.name} | 序号: ${item.sort}`;
    listDom.appendChild(li);
  });
}

// 清空房间输入框
function clearRoomInputs() {
  document.getElementById("roomId").value = "";
  document.getElementById("roomTypeIdSelect").value = "";
  document.getElementById("roomFloorIdSelect").value = "";
  document.getElementById("roomName").value = "";
  document.getElementById("roomSort").value = "";
}


// 之前的代码保持不变...

// 修改渲染房态函数，使用卡片式布局
function renderRoomStatus() {
  const rooms = getLocalStorage("rooms") || [];
  const roomTypes = getLocalStorage("roomTypes") || [];
  const container = document.getElementById("roomStatusContainer");
  container.innerHTML = "";

  rooms.forEach(room => {
    // 根据 roomTypeId 匹配房型信息
    const roomType = roomTypes.find(type => type.id === room.roomTypeId) || { name: "未知房型", price: "未知", deposit: "未知" };
    
    // 检查房间是否已被占用
    const isOccupied = checkRoomOccupied(room.id);
    
    const card = document.createElement("div");
    card.className = `room-card ${isOccupied ? 'occupied' : 'available'}`;
    card.onclick = () => openCreateOrderModal(room.id, room.name, roomType.deposit);
    
    card.innerHTML = `
      <div class="room-number">${room.name}</div>
      <div class="room-type">${roomType.name}</div>
      <div class="room-status">${isOccupied ? '已入住' : '空闲'}</div>
    `;
    
    container.appendChild(card);
  });
}

// 之前的其他代码保持不变...
// 之前的代码保持不变...

// 渲染房态表格，为房号添加点击事件
function renderRoomStatus作废2() {
  const rooms = getLocalStorage("rooms") || [];
  const roomTypes = getLocalStorage("roomTypes") || [];
  const tableBody = document.getElementById("roomStatusTableBody");
  tableBody.innerHTML = "";

  rooms.forEach(room => {
    // 根据 roomTypeId 匹配房型信息
    const roomType = roomTypes.find(type => type.id === room.roomTypeId) || { name: "未知房型", price: "未知", deposit: "未知" };
    
    // 检查房间是否已被占用
    const isOccupied = checkRoomOccupied(room.id);
    
    const tr = document.createElement("tr");
    tr.innerHTML = `
      <td>
        <span class="room-number ${isOccupied ? 'occupied' : 'available'}" 
              onclick="openCreateOrderModal('${room.id}', '${room.name}', '${roomType.deposit}')">
          ${room.name}
        </span>
      </td>
      <td>${roomType.name}</td>
      <td>${isOccupied ? '已入住' : '空闲'}</td>
    `;
    tableBody.appendChild(tr);
  });
}

// 检查房间是否已被占用
function checkRoomOccupied(roomId) {
  const orders = getLocalStorage("depositOrders") || [];
  return orders.some(order => order.room_id === roomId && order.status === 2); // 2表示在住
}

// 打开创建订单模态框
function openCreateOrderModal(roomId, roomName, depositPrice) {
  document.getElementById("modalRoomId").value = roomId;
  document.getElementById("modalRoomName").textContent = roomName;
  document.getElementById("modalDepositPrice").textContent = depositPrice;
  document.getElementById("modalUserId").value = "";
  document.getElementById("modalUserName").value = "";
  document.getElementById("modalUserPhone").value = "";
  
  // 显示模态框
  document.getElementById("createOrderModal").style.display = "block";
}

// 关闭模态框
function closeModal() {
  document.getElementById("createOrderModal").style.display = "none";
}

// 提交创建订单
function submitCreateOrder() {
  const roomId = document.getElementById("modalRoomId").value;
  const userId = document.getElementById("modalUserId").value;
  const userName = document.getElementById("modalUserName").value;
  const userPhone = document.getElementById("modalUserPhone").value;
  const depositPrice = document.getElementById("modalDepositPrice").textContent;
  
  if (!roomId || !userId || !userName || !userPhone) {
    alert("请填写完整信息");
    return;
  }
  
  // 获取房间信息
  const rooms = getLocalStorage("rooms") || [];
  const room = rooms.find(r => r.id === roomId);
  
  if (!room) {
    alert("房间不存在");
    return;
  }
  
  // 获取房型信息以确定房价
  const roomTypes = getLocalStorage("roomTypes") || [];
  const roomType = roomTypes.find(t => t.id === room.roomTypeId);
  
  if (!roomType) {
    alert("房型信息不存在");
    return;
  }
  
  // 创建订单对象
  const newOrder = {
    cyber_id: getNextCyberId(),
    cyber_sn: generateCyberSn(),
    mer_id: mer_id,
    store_id: store_id,
    name: userName,
    room_id: roomId,
    room_name: room.name,
    total_price: parseFloat(roomType.price),
    price: parseFloat(roomType.price),
    deposit_price: parseFloat(depositPrice),
    userid: userId,
    username: userName,
    userphone: userPhone,
    create_time: Date.now(),
    pay_time: null,
    discount_price: 0,
    status: 2, // 2: 在住
    pay_type: "现金",
    auth_code: "",
    checkout_time: null,
    remarks: ""
  };
  
  // 保存订单到 localStorage
  const orders = getLocalStorage("depositOrders") || [];
  orders.push(newOrder);
  setLocalStorage("depositOrders", orders);
  
  // 关闭模态框
  closeModal();
  
  // 刷新订单列表和房态
  loadDepositOrders();
  renderRoomStatus();
  
  alert("订单创建成功！");
}

// 新增一些CSS样式
const style = document.createElement('style');
style.textContent = `
  .modal {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0,0,0,0.5);
    display: flex;
    justify-content: center;
    align-items: center;
  }
  
  .modal-content {
    background-color: white;
    padding: 20px;
    border-radius: 5px;
    width: 400px;
    max-width: 90%;
  }
  
  .modal-content div {
    margin-bottom: 10px;
  }
  
  .room-number {
    cursor: pointer;
    text-decoration: underline;
  }
  
  .room-number.available {
    color: green;
  }
  
  .room-number.occupied {
    color: red;
  }
`;
document.head.appendChild(style);

// ------------------ 收银台：房态渲染 ------------------
function renderRoomStatus作废() {
  const rooms = getLocalStorage("rooms") || [];
  const roomTypes = getLocalStorage("roomTypes") || [];
  const tableBody = document.getElementById("roomStatusTableBody");
  tableBody.innerHTML = "";

  rooms.forEach(room => {
    // 根据 roomTypeId 匹配房型信息
    const roomType = roomTypes.find(type => type.id === room.roomTypeId) || { name: "未知房型", price: "未知", deposit: "未知" };
    
    const tr = document.createElement("tr");
    tr.innerHTML = `
      <td>${room.name}</td>
      <td>${roomType.name}</td>
      <td>空房</td> <!-- 可扩展：结合订单状态判断实际房态 -->
    `;
    tableBody.appendChild(tr);
  });
}

// ------------------ 押金管理：订单操作（localStorage） ------------------
// 生成唯一 cyber_id（自动递增）
function getNextCyberIdAI断层() {
  const orders = getLocalStorage("depositOrders") || [];
  const maxId = orders.reduce((max, item) => (item.cyber_id > max ? item.cyber_id : max), 0);
  return maxId + 1;
}


// 生成唯一 cyber_id（自动递增）
function getNextCyberId() {
  const orders = getLocalStorage("depositOrders") || [];
  const maxId = orders.reduce((max, item) => (item.cyber_id > max ? item.cyber_id : max), 0);
  return maxId + 1;
}

// 生成32位随机字符作为 cyber_sn
function generateCyberSn() {
  const chars = 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789';
  let result = '';
  for (let i = 0; i < 32; i++) {
    result += chars.charAt(Math.floor(Math.random() * chars.length));
  }
  return result;
}

// 创建新订单（开房 + 押金）
function createDepositOrder() {
  // 模拟表单输入，实际应通过表单获取
  const roomId = prompt("请输入房间ID");
  const userId = prompt("请输入客人身份证号");
  const userName = prompt("请输入客人姓名");
  const userPhone = prompt("请输入客人手机号");
  
  if (!roomId || !userId || !userName || !userPhone) {
    alert("请填写完整信息");
    return;
  }
  
  // 获取房间信息
  const rooms = getLocalStorage("rooms") || [];
  const room = rooms.find(r => r.id === roomId);
  
  if (!room) {
    alert("房间不存在");
    return;
  }
  
  // 获取房型信息以确定押金金额
  const roomTypes = getLocalStorage("roomTypes") || [];
  const roomType = roomTypes.find(t => t.id === room.roomTypeId);
  
  if (!roomType) {
    alert("房型信息不存在");
    return;
  }
  
  // 创建订单对象
  const newOrder = {
    cyber_id: getNextCyberId(),
    cyber_sn: generateCyberSn(),
    mer_id: mer_id,
    store_id: store_id,
    name: userName,
    room_name: room.name,
    total_price: parseFloat(roomType.price),
    price: parseFloat(roomType.price),
    deposit_price: parseFloat(roomType.deposit),
    userid: userId,
    username: userName,
    userphone: userPhone,
    create_time: Date.now(),
    pay_time: null,
    discount_price: 0,
    status: 2, // 2: 在住
    pay_type: "现金",
    auth_code: "",
    checkout_time: null,
    remarks: ""
  };
  
  // 保存订单到 localStorage
  const orders = getLocalStorage("depositOrders") || [];
  orders.push(newOrder);
  setLocalStorage("depositOrders", orders);
  
  // 刷新订单列表和房态
  loadDepositOrders();
  renderRoomStatus();
  
  alert("订单创建成功！");
}

// 退房并处理押金
function checkoutRoom(orderId) {
  const orders = getLocalStorage("depositOrders") || [];
  const orderIndex = orders.findIndex(o => o.cyber_id === orderId);
  
  if (orderIndex === -1) {
    alert("订单不存在");
    return;
  }
  
  const order = orders[orderIndex];
  
  // 确认退房
  if (confirm(`确认退房并处理押金？\n房间号：${order.room_name}\n客人姓名：${order.username}\n押金金额：${order.deposit_price}`)) {
    // 更新订单状态
    order.status = 1; // 1: 已退房
    order.checkout_time = Date.now();
    
    // 模拟押金退回操作
    alert(`押金 ${order.deposit_price} 元已原路退回！`);
    
    // 保存更新后的订单
    orders[orderIndex] = order;
    setLocalStorage("depositOrders", orders);
    
    // 刷新订单列表和房态
    loadDepositOrders();
    renderRoomStatus();
  }
}

// 加载押金订单列表
function loadDepositOrders() {
  const orders = getLocalStorage("depositOrders") || [];
  const tableBody = document.getElementById("depositTableBody");
  tableBody.innerHTML = "";
  
  orders.forEach(order => {
    const tr = document.createElement("tr");
    
    // 根据状态设置不同样式
    if (order.status === 2) {
      tr.style.backgroundColor = "#fff3cd"; // 黄色背景表示在住
    }
    
    tr.innerHTML = `
      <td>${order.cyber_sn}</td>
      <td>${order.room_name}</td>
      <td>${order.username}</td>
      <td>${order.total_price}</td>
      <td>${order.status === 2 ? "在住" : "已退房"}</td>
      <td>
        ${order.status === 2 ? 
          `<button onclick="checkoutRoom(${order.cyber_id})">退房</button>` : 
          '已完成'}
      </td>
    `;
    tableBody.appendChild(tr);
  });
}

// ------------------ localStorage 通用操作函数 ------------------
// 带前缀的 localStorage 获取
function getLocalStorage(key) {
  const prefixedKey = STORAGE_PREFIX + key;
  const data = localStorage.getItem(prefixedKey);
  return data ? JSON.parse(data) : null;
}

// 带前缀的 localStorage 设置
function setLocalStorage(key, value) {
  const prefixedKey = STORAGE_PREFIX + key;
  localStorage.setItem(prefixedKey, JSON.stringify(value));
}

// 清空所有酒店系统相关的 localStorage 数据
function clearAllData() {
  if (confirm("确定要清空所有酒店系统数据吗？此操作不可恢复！")) {
    const keysToRemove = [];
    for (let i = 0; i < localStorage.length; i++) {
      const key = localStorage.key(i);
      if (key.startsWith(STORAGE_PREFIX)) {
        keysToRemove.push(key);
      }
    }
    
    keysToRemove.forEach(key => localStorage.removeItem(key));
    alert("所有数据已清空！");
    
    // 刷新页面
    location.reload();
  }
}

// ------------------ 工具函数 ------------------
// 格式化时间戳为可读日期时间
function formatDateTime(timestamp) {
  if (!timestamp) return "";
  const date = new Date(timestamp);
  return `${date.getFullYear()}-${padZero(date.getMonth() + 1)}-${padZero(date.getDate())} ${padZero(date.getHours())}:${padZero(date.getMinutes())}`;
}

// 数字补零
function padZero(num) {
  return num < 10 ? "0" + num : num;
}</script>
</body>
</html>
  <script>
    // 前缀常量
   // const STORAGE_PREFIX = "东方仙盟开源酒店系统_";
    
    // 页面初始化
    window.onload = function() {
     
	 cyberwin_仙盟创梦_初始化本体();

    };
    /*
    // 切换页面
    function showPage(pageId) {
      const pages = document.querySelectorAll('.page');
      pages.forEach(page => {
        page.style.display = 'none';
      });
      
      document.getElementById(pageId + 'Page').style.display = 'block';
    }
	*/
    
    // 加载房型数据
    function loadRoomTypes() {
      const roomTypes = getLocalStorage('roomTypes') || [];
      const tableBody = document.getElementById('roomTypeTable');
      tableBody.innerHTML = '';
      
      roomTypes.forEach(type => {
        const row = document.createElement('tr');
        row.innerHTML = `
          <td>${type.id}</td>
          <td>${type.name}</td>
          <td>${type.price}</td>
          <td>${type.deposit}</td>
          <td>
            <button class="btn-edit" onclick="openModal('roomType', 'edit', '${type.id}')">编辑</button>
            <button class="btn-delete" onclick="deleteData('roomType', '${type.id}')">删除</button>
          </td>
        `;
        tableBody.appendChild(row);
      });
    }
    
    // 加载楼层数据
    function loadFloors() {
      const floors = getLocalStorage('floors') || [];
      const tableBody = document.getElementById('floorTable');
      tableBody.innerHTML = '';
      
      floors.forEach(floor => {
        const row = document.createElement('tr');
        row.innerHTML = `
          <td>${floor.id}</td>
          <td>${floor.name}</td>
          <td>${floor.sort}</td>
          <td>
            <button class="btn-edit" onclick="openModal('floor', 'edit', '${floor.id}')">编辑</button>
            <button class="btn-delete" onclick="deleteData('floor', '${floor.id}')">删除</button>
          </td>
        `;
        tableBody.appendChild(row);
      });
    }
    
    // 加载房间数据
    function loadRooms() {
      const rooms = getLocalStorage('rooms') || [];
      const roomTypes = getLocalStorage('roomTypes') || [];
      const floors = getLocalStorage('floors') || [];
      const tableBody = document.getElementById('roomTable');
      tableBody.innerHTML = '';
      
      rooms.forEach(room => {
        const roomTypeName = roomTypes.find(t => t.id === room.roomTypeId)?.name || '未知';
        const floorName = floors.find(f => f.id === room.floorId)?.name || '未知';
        
        const row = document.createElement('tr');
        row.innerHTML = `
          <td>${room.id}</td>
          <td>${roomTypeName}</td>
          <td>${floorName}</td>
          <td>${room.name}</td>
          <td>${room.sort}</td>
          <td>
            <button class="btn-edit" onclick="openModal('room', 'edit', '${room.id}')">编辑</button>
            <button class="btn-delete" onclick="deleteData('room', '${room.id}')">删除</button>
          </td>
        `;
        tableBody.appendChild(row);
      });
    }
    
    // 打开模态框
    function openModal(formType, action, id = null) {
      document.getElementById('formType').value = formType;
      document.getElementById('formAction').value = action;
      document.getElementById('formId').value = id || '';
      
      // 隐藏所有表单字段
      document.getElementById('roomTypeFormFields').style.display = 'none';
      document.getElementById('floorFormFields').style.display = 'none';
      document.getElementById('roomFormFields').style.display = 'none';
      
      // 显示对应表单字段
      document.getElementById(`${formType}FormFields`).style.display = 'block';
      
      // 设置模态框标题
      const title = action === 'add' ? `添加${getFormTypeName(formType)}` : `编辑${getFormTypeName(formType)}`;
      document.getElementById('modalTitle').textContent = title;
      
      // 如果是编辑模式，填充表单数据
      if (action === 'edit') {
        fillFormData(formType, id);
      } else {
        // 清空表单
        document.getElementById('dataForm').reset();
        
        // 为房间表单加载下拉选项
        if (formType === 'room') {
          loadRoomTypeOptions();
          loadFloorOptions();
        }
      }
      
      // 显示模态框
      document.getElementById('modal').style.display = 'block';
    }
    
    // 获取表单类型名称
    function getFormTypeName(formType) {
      const names = {
        'roomType': '房型',
        'floor': '楼层',
        'room': '房间'
      };
      return names[formType] || '';
    }
    
    // 填充表单数据
    function fillFormData(formType, id) {
      const data = getLocalStorage(formType + 's').find(item => item.id === id);
      if (!data) return;
      
      if (formType === 'roomType') {
        document.getElementById('roomTypeName').value = data.name;
        document.getElementById('roomTypePrice').value = data.price;
        document.getElementById('roomTypeDeposit').value = data.deposit;
      } else if (formType === 'floor') {
        document.getElementById('floorName').value = data.name;
        document.getElementById('floorSort').value = data.sort;
      } else if (formType === 'room') {
        document.getElementById('roomTypeId').value = data.roomTypeId;
        document.getElementById('roomFloorId').value = data.floorId;
        document.getElementById('roomName').value = data.name;
        document.getElementById('roomSort').value = data.sort;
        
        // 加载下拉选项
        loadRoomTypeOptions();
        loadFloorOptions();
      }
    }
    
    // 加载房型下拉选项
    function loadRoomTypeOptions() {
      const roomTypes = getLocalStorage('roomTypes') || [];
      const select = document.getElementById('roomTypeId');
      select.innerHTML = '';
      
      roomTypes.forEach(type => {
        const option = document.createElement('option');
        option.value = type.id;
        option.textContent = type.name;
        select.appendChild(option);
      });
    }
    
    // 加载楼层下拉选项
    function loadFloorOptions() {
      const floors = getLocalStorage('floors') || [];
      const select = document.getElementById('roomFloorId');
      select.innerHTML = '';
      
      floors.forEach(floor => {
        const option = document.createElement('option');
        option.value = floor.id;
        option.textContent = floor.name;
        select.appendChild(option);
      });
    }
    
   
    
    // 保存数据
    function saveData() {
      const formType = document.getElementById('formType').value;
      const action = document.getElementById('formAction').value;
      const id = document.getElementById('formId').value;
      
      let data;
      
      if (formType === 'roomType') {
        data = {
          id: id || generateId(),
          name: document.getElementById('roomTypeName').value,
          price: document.getElementById('roomTypePrice').value,
          deposit: document.getElementById('roomTypeDeposit').value
        };
      } else if (formType === 'floor') {
        data = {
          id: id || generateId(),
          name: document.getElementById('floorName').value,
          sort: document.getElementById('floorSort').value
        };
      } else if (formType === 'room') {
        data = {
          id: id || generateId(),
          roomTypeId: document.getElementById('roomTypeId').value,
          floorId: document.getElementById('roomFloorId').value,
          name: document.getElementById('roomName').value,
          sort: document.getElementById('roomSort').value
        };
      }
      
      // 保存到 localStorage
      let items = getLocalStorage(formType + 's') || [];
      
      if (action === 'edit') {
        // 编辑：替换原有数据
        const index = items.findIndex(item => item.id === id);
        if (index !== -1) {
          items[index] = data;
        }
      } else {
        // 添加：新增数据
        items.push(data);
      }
      
      setLocalStorage(formType + 's', items);
      
      // 刷新表格
      if (formType === 'roomType') {
        loadRoomTypes();
      } else if (formType === 'floor') {
        loadFloors();
      } else if (formType === 'room') {
        loadRooms();
      }
      
      // 关闭模态框
      东方仙盟菜单_关闭模态('modal');
      
      // 提示成功
      alert(`${action === 'add' ? '添加' : '编辑'}成功！`);
    }
    
    // 删除数据
    function deleteData(formType, id) {
      if (!confirm(`确定要删除此${getFormTypeName(formType)}吗？`)) {
        return;
      }
      
      let items = getLocalStorage(formType + 's') || [];
      items = items.filter(item => item.id !== id);
      
      setLocalStorage(formType + 's', items);
      
      // 刷新表格
      if (formType === 'roomType') {
        loadRoomTypes();
      } else if (formType === 'floor') {
        loadFloors();
      } else if (formType === 'room') {
        loadRooms();
      }
      
      alert(`删除成功！`);
    }
    
    // 生成唯一ID
    function generateId() {
      return 'ID_' + Date.now() + '_' + Math.floor(Math.random() * 1000);
    }
    
    // 带前缀的 localStorage 获取
    function getLocalStorage(key) {
      const prefixedKey = STORAGE_PREFIX + key;
      const data = localStorage.getItem(prefixedKey);
      return data ? JSON.parse(data) : [];
    }
    
    // 带前缀的 localStorage 设置
    function setLocalStorage(key, value) {
      const prefixedKey = STORAGE_PREFIX + key;
      localStorage.setItem(prefixedKey, JSON.stringify(value));
    }

	function cyberwin_仙盟创梦_初始化本体(){
		 loadRoomTypes();
      loadFloors();
      loadRooms();
	  loadDepositOrders();
      东方仙盟菜单_显示_子页面('room');
      东方仙盟菜单_显示_主页面("reception");
	  renderRoomStatus();
		}
  </script>